<template>
  <div class="container">
    <div class="header_img">
      <img src="../../../../static/images/warehouse.png" />
    </div>
    <dv-scroll-board :config="warehouse_config" style="width:100%;height:100%" />

    <!-- 弹出详情 -->
    <el-dialog title="废纸箱" :visible.sync="dialogTableVisible"  :center="false" modal :append-to-body="true" width="100%"  :show-close="true" :close-on-click-modal="true"  custom-class="dialog_content" class="dialog_content" top="0">
        <el-table :data="gridData" class="table_data" style="background:rgba(0,5,46,1);">
          <el-table-column property="date" label="供应商" width="150"></el-table-column>
          <el-table-column property="name" label="吨数" width="200"></el-table-column>
          <el-table-column property="address" label="金额"></el-table-column>
        </el-table>
    </el-dialog>
  </div>
</template>

<script>
import untils from '@/untils/index'
export default {
  name: 'SupplierData',
  props: {
    warehouse_data: {
      type: Array,
      default: () => {
        return []
      }
    },
    nowWarehouse: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      gridData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }],
      dialogTableVisible: false
    }
  },
  computed: {
    'warehouse_config': function () {
      try {
        let res = this.warehouse_data[this.nowWarehouse].details
        let arr = []
        res.map((item, index) => {
          arr.push([
            item.productName,
            item.orderWeight > 0 ? untils.unitConvert(item.orderWeight) : item.orderWeight,
            item.orderSales > 0 ? untils.unitConvert(item.orderSales) : item.orderSales,
            item.price > 0 ? untils.unitConvert(item.price) : item.price
          ])
        })
        return {
          header: ['品类', '重量', '金额', '均价'],
          data: arr,
          headerHeight: 34,
          headerBGC: '#0D1B6D',
          oddRowBGC: '#02063a',
          evenRowBGC: '#030842',
          rowNum: 15,
          waitTime: 3000,
          align: ['left']
        }
      } catch (e) {
        console.log(e.message)
      }
    }
  },
  methods: {
    detialTap () {
      this.dialogTableVisible = true
    },
    load () {}
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  overflow: hidden;
}
.header_img {
  width: 100%;
  /* height: 45px; */
  text-align: center;
}
.dialog_content{
  width: 40%;
  height: 180px;
  overflow-y: scroll;
  margin-top: 0;
  background:rgba(0,5,46,1);
  border:3px solid rgba(5,41,155,1);
  box-shadow:0px 30px 120px 0px rgba(0,5,25,1);
  opacity:0.9;
  border-radius:12px;
  color: #04C0E2FF;
  font-size: 12px;
  position: relative;
  top: 35vh;
  left: 56%;
  z-index: 2001;
}

.dialog_content::-webkit-scrollbar {/*滚动条整体样式*/
        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 0.2px;
        z-index: 100;
}
.dialog_content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
         /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
        /* background: #04C0E2FF; */
        background: none;
}
.dialog_content::-webkit-scrollbar-track {/*滚动条里面轨道*/
        /* -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); */
        border-radius: 10px;
        /* background: rgba(6, 7, 107, 0.59); */
        background: none;

}

</style>
